<template>
	<view class="code">
	<uni-card class="code-card">
			<template v-slot:title>
				<uni-list>
			      <uni-list-item  title="员工码"/>
			  </uni-list>
			</template>
			<view class="code-card__codeinfo">
				<image src="/static/assets/my/二维码.png" mode=""></image>
				<text>糖醋的员工码(1241252255)</text>
			</view>
	</uni-card>
	
	<!-- code换肤 -->
	<view class="code-service">
		<uni-list>
		   <uni-list-item
		           title="背景换肤" 
		           thumb="/static/assets/my/换肤.png" 
		           thumb-size="medium" 
		           link 
		           to="/pages/index/index" 
		         >
		         </uni-list-item>
				 <uni-list-item
				         title="权益兑换" 
				         thumb="/static/assets/my/权益兑换.png" 
				         thumb-size="medium" 
				         link 
				         to="/pages/index/index" 
				       >
				       </uni-list-item>
		</uni-list>
	</view>
	</view>
</template>

<script setup>
	
</script>

<style scoped lang="scss">
	.code .code-card .code-card__codeinfo{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	     .code .code-card image{
			 width: 80%;
		 }
		 .code .code-card text{
		 			font-size: $uni-font-size-lg;
					margin-top: 40rpx;
					font-weight: 600;
					color: #7b9ebe;
		 }
		 .code-service{
			 width: 90%;
			 margin-left: 5%;
		 }
		 // 已弃用/deep/穿透的写法
		// /deep/ uni-progress {
		// 	width: 160upx;
			
		// 	.uni-progress-bar {
		// 		border-radius: 6upx;
		// 		.uni-progress-inner-bar {
		// 			border-radius: 6upx;
		// 		}
		// 	}
		// }
		// :deep穿透
		:deep(.uni-list-item){
			.uni-list-item__container{
			.uni-list-item__content{
				.uni-list-item__content-title{
					font-weight: 600;
					color: #7b9ebe;
				}
			}
		}
	}
</style>
